<template>
	<sw-common-frame :loading="loading">
		<template slot="button">
			<el-button size="small" type="primary" icon="el-icon-refresh" @click="handleOpenDialog()">一键备份</el-button>
		</template>
		<template slot="query">
			<el-form size="small" inline>
				<el-form-item><el-input v-model="queryData.name" clearable placeholder="请输入备份名称"></el-input></el-form-item>
				<el-form-item><el-input v-model="queryData.createName" clearable placeholder="请输入创建人"></el-input></el-form-item>
				<el-form-item><el-button icon="el-icon-search" type="primary" @click="queryTableData()">查询</el-button></el-form-item>
			</el-form>
		</template>
		<template slot="table">
			<el-table size="medium" :data="tableData" stripe height="100%">
				<el-table-column type="index" label="序号" align="center"></el-table-column>
				<el-table-column label="备份名称" min-width="160">
					<template slot-scope="{ row }">
						<el-button type="text" @click="handleLookRecoverData(row)">{{ row.name }}</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="ipAddr" label="IP地址" min-width="100"></el-table-column>
				<el-table-column prop="content" label="备份描述" min-width="200" show-overflow-tooltip></el-table-column>
				<el-table-column prop="createName" label="创建人" width="120"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
				<el-table-column label="操作" width="136">
					<template slot-scope="{ row }">
						<el-button type="text" @click="handleRecoverData(row)">恢复</el-button>
						<el-button type="text" @click="handleOpenDialog(row.id)">修改</el-button>
						<el-button type="text" @click="handleDownloadData(row)">下载</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<template slot="page">
			<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()"></sw-pagination>
		</template>
		<form-dialog v-model="formDialog" :data-id="dataId" @refresh="queryTableData()"></form-dialog>
		<recover-drawer v-model="recoverDrawer" :data-id="dataId"></recover-drawer>
	</sw-common-frame>
</template>

<script>
import formDialog from './form';
import recoverDrawer from './drawer';
import listMixins from '@/mixins/listMixins';
import { getBackupList, recoverDatabase, downDatabase } from '@/api/system/tbSysBackup';
export default {
	mixins: [listMixins],
	components: { formDialog, recoverDrawer },
	data() {
		return {
			recoverDrawer: false
		};
	},
	computed: {
		listFunction() {
			return eval(getBackupList);
		}
	},
	methods: {
		//查看恢复列表
		handleLookRecoverData(data) {
			this.dataId = data.id;
			this.recoverDrawer = true;
		},

		//恢复备份数据
		handleRecoverData(data) {
			let that = this;
			that.$confirm(`确认恢复备份<font color="#f00">【${data.name}】</font>？恢复前请备份最新数据，以免丢失！`, '恢复提示', {
				type: 'warning',
				cancelButtonText: '去备份',
				confirmButtonText: '恢复备份',
				dangerouslyUseHTMLString: true,
				distinguishCancelAndClose: true,
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.recoverBackupRequest(data.id);
						instance.confirmButtonLoading = false;
					} else if (action === 'cancel') {
						that.dataId = '';
						that.formDialog = true;
					}
					done();
				}
			}).catch(() => {});
		},

		//恢复备份请求
		async recoverBackupRequest(id) {
			let fullLoading = this.$loading({ lock: true, text: '恢复备份数据进行中...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });
			let result = await recoverDatabase(id).then((res) => res.data);
			fullLoading.close();
			if (result.code === '0') {
				this.$message.success('恢复备份成功');
			} else {
				this.$message.error('恢复备份失败');
			}
		},

		//下载备份
		async handleDownloadData(data) {
			let result = await downDatabase(data.id).then((res) => res.data);
			if (result.code === '0') {
				let downloadUrl = window.staticPath + result.data[0];
				console.log(downloadUrl);
			}
		}
	}
};
</script>

<style scoped></style>
